<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="file-behavior">
    <div class="con-title">
      <span>文件操作行为情况</span>
      <div>
        <el-select v-model="dateType" size="mini" placeholder="近一周" @change="changeTime">
          <el-option v-for="i in dateSel" :key="i.value" :label="i.label" :value="i.value" />
        </el-select>
        <el-date-picker
          v-if="dateType == 'custom'"
          v-model="pickTime"
          size="mini"
          type="daterange"
          clearable
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          style="margin-left: 10px;"
          @change="changeTime"
        />
      </div>
    </div>
    <div class="l-value">
      最后更新时间：<span class="little-word">{{ fileObj.lastUpdated }}</span>
    </div>
    <div class="f-bottom">
      <div class="left">
        <el-row class="l-top">
          <el-col :span="12">
            <div>文件打印频次：{{ fileObj.printFrequency }}/天</div>
            <p>{{ fileObj.printTotal || 0 }} <span>次</span></p>
          </el-col>
          <el-col :span="12">
            <div>文件刻录频次：{{ fileObj.cdFrequency }}/天</div>
            <p>{{ fileObj.cdTotal || 0 }} <span>次</span></p>
          </el-col>
        </el-row>
        <div class="l-bottom">
          <p style="font-size: 14px; font-weight: 600">打印刻录时间段：</p>
          <div class="lists">
            <el-row v-for="(item,index) in fileObj.timeSlotList" :key="index" :gutter="20">
              <el-col :span="6" style="font-size:14px;text-align: right; color: #8c8c8c">{{ item.time }}</el-col>
              <el-col :span="18">
                <el-progress
                  v-if="!isNaN(parseInt(item.proportion))"
                  :percentage="item.proportion * 1"
                  :stroke-width="7"
                  :color="customColors"
                />
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="right">
        <heat-map-echarts ref="heat_ref" :days-data="daysData" />
      </div>
    </div>
  </div>
</template>

<script>
import HeatMapEcharts from './HeatMapChart'
import { fileBehavior } from '@/api/dispose/userPortrait'

export default {
  components: {
    HeatMapEcharts
  },
  props: {
    ip: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dateType: 'week',
      // 时间选择
      dateSel: [
        {
          label: '近一周',
          value: 'week'
        },
        {
          label: '近一月',
          value: 'month'
        },
        {
          label: '自定义',
          value: 'custom'
        }
      ],
      pickTime: '',
      daysData: {
        yAxisArr: [],
        dataArr: []
      },
      axisArr: ['12a', '2a', '4a', '6a', '8a', '10a', '12p', '2p', '4p', '6p', '8p', '10p'],
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      fileObj: {
        // 打印频次
        printFrequency: '',
        // 刻录频次/天
        cdFrequency: '',
        printTotal: 0,
        cdTotal: 0,
        // 最后更新时间
        lastUpdated: '',
        timeSlotList: [{}]
      }
    }
  },
  watch: {
    ip: {
      handler(newValue) {
        if (newValue) {
          this.getData()
        }
      },
      immediate: false,
      deep: true
    }
  },
  mounted() {
    // this.getData()
  },
  methods: {
    getData() {
      if (this.dateType === 'custom' && this.pickTime.length === 0) return
      else if (this.dateType !== 'custom') {
        this.pickTime = []
      }
      const startDay = this.pickTime[0] || ''
      const endDay = this.pickTime[1] || ''
      const params = { type: this.dateType, startDay, endDay, ip: this.ip }
      fileBehavior(params).then((res) => {
        this.fileObj = res
        this.fileObj.timeSlotList.sort((a,b)=>{
            return b.proportion-a.proportion;
        })
        const yAxisArr = []
        const dataArr = []

        res.behaviorList.map((item, index) => {
          yAxisArr.push(item.dayText)
          this.axisArr.forEach((i, idx) => {
            dataArr.push([idx, index, item[`sum${i}`]])
          })
        })

        this.daysData = {
          yAxisArr,
          dataArr
        }
        this.$refs.heat_ref.getData(this.daysData)
      })
    },
    changeTime() {
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
#app.dark-theme{
  .lists{
    .el-col{
      color:#fff !important;
    }
  }
  .little-word{
      color:#fff !important;
    }
}
::v-deep .el-date-editor--daterange.el-input__inner{
  width:350px !important;
}
 .el-progress__text{
  font-size:14px;
 }
.file-behavior {
  width: 100%;
  padding: 20px;
  height: 350px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  background: #fff;

  .con-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
  }

  .l-value {
    margin: 20px 0 0;
    font-size:14px;
    .little-word {
      margin-left: 6px;
      color: #8c8c8c;
    }
  }
  .f-bottom {
    display: flex;
    flex: 1;
    align-items: stretch;
    justify-content: space-between;
    margin-top: 10px;
    .left {
      width: 30%;
      margin-right: 40px;
      .l-top {
        font-weight: 600;
        font-size: 14px;
        padding: 10px 0 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        p {
          font-size: 20px;
          margin: 5px 0;
          span {
            margin-left: 5px;
            font-size: 14px;
          }
        }
      }
      .l-bottom {
        padding: 20px 0;
      }
    }
    .right {
      flex: 1;
      height: 100%;
      border-left: 1px solid rgba(0, 0, 0, 0.08);
      padding-left: 10px;
    }
  }
}
::v-deep {
  .el-progress__text {
    margin-left: 20px;
    font-size: 12px !important;
  }
}
</style>
